<template>
  <div>
    <h3 style="padding: 0 10px">
      尊敬的{{ username }}伙伴，{{ $route.query.name }}业务数据如下
    </h3>
    <van-collapse v-model="activeName">
      <van-collapse-item title="今日数据" name="1">
        <div class="collapse_item">
          <div class="title">注册用户数</div>
          <Table :data="businessData"
                 :column="[{label:'注册用户数',prop:'registrationNumber'}]"/>
        </div>
        <div class="collapse_item">
          <div class="title">进件数</div>
          <Table :data="businessData"
                 :column="[{label:'总数',prop:'inputNmber'},{label:'新客',prop:'newInputNmber'},{label:'老客',prop:'oldInputNmber'}]"/>
        </div>
        <div class="collapse_item">
          <div class="title">审核数</div>
          <Table :data="businessData"
                 :column="[{label:'总数',prop:'pass'},{label:'新客',prop:'newPass'},{label:'老客',prop:'oldPass'}]"/>
        </div>
        <div class="collapse_item">
          <div class="title">放款数</div>
          <Table :data="businessData"
                 :column="[{label:'总数',prop:'pay'},{label:'新客',prop:'newPay'},{label:'老客',prop:'oldPay'}]"/>
        </div>
        <div class="collapse_item">
          <div class="title">放款本金</div>
          <Table :data="businessData"
                 :column="[{label:'总数',prop:'payPrincipal'},{label:'新客',prop:'newPayPrincipal'},{label:'老客',prop:'oldPayPrincipal'}]"/>
        </div>
        <div class="collapse_item">
          <div class="title">放款合同金额</div>
          <Table :data="businessData"
                 :column="[{label:'总数',prop:'payAmount'},{label:'新客',prop:'newPayAmount'},{label:'老客',prop:'oldPayAmount'}]"/>
        </div>
        <div class="collapse_item">
          <div class="title">展期数</div>
          <Table :data="businessData"
                 :column="[{label:'总数',prop:'defer'},{label:'新客',prop:'newDefer'},{label:'老客',prop:'oldDefer'}]"/>
        </div>
        <div class="collapse_item">
          <div class="title">待打款数</div>
          <Table :data="businessData"
                 :column="[{label:'总数',prop:'waitPay'},{label:'新客',prop:'newWaitPay'},{label:'老客',prop:'oldWaitPay'}]"/>
        </div>
        <div class="collapse_item">
          <div class="title">待打款本金</div>
          <Table :data="businessData"
                 :column="[{label:'总数',prop:'waitPayAmount'},{label:'新客',prop:'newWaitPayAmount'},{label:'老客',prop:'oldWaitPayAmount'}]"/>
        </div>
        <div class="collapse_item">
          <div class="title">今日到期</div>
          <Table :data="businessData"
                 :column="[{label:'到期',prop:'expireShould'},{label:'已还',prop:'expireRefund'},{label:'待还',prop:'expireWait'},{label:'今日首逾率',prop:'overdueRate'}]"/>
        </div>
        <div class="collapse_item">
          <div class="title">提醒催回率</div>
          <table class="table" width="100%" cellspacing="0">
            <thead class="header">
            <th v-for="item in remindColumns" :key="item.prop">{{ item.label }}</th>
            </thead>
            <tbody class="body">
            <tr style="text-align: center" v-for="item in remindCollection" :key="item.customerGroupName">
              <td v-for="column in remindColumns" :key="column.prop">{{ item[column.prop] }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </van-collapse-item>
      <van-collapse-item title="累计数据" name="2">
        <div class="collapse_item" style="display:flex;align-items: center">
          <InputDate style="width: 46%" :timeValue="historyTime.startTime" @confirm="historyStartChange"/>
          <div style="flex: 1;text-align: center">~</div>
          <InputDate style="width: 46%" :timeValue="historyTime.endTime" @confirm="historyEndChange"/>
        </div>
        <div class="collapse_item">
          <div class="title">注册用户数</div>
          <Table :data="historyData"
                 :column="[{label:'注册用户数',prop:'registrationNumber'}]"/>
        </div>
        <div class="collapse_item">
          <div class="title">进件数</div>
          <Table :data="historyData"
                 :column="[{label:'总数',prop:'inputNmber'},{label:'新客',prop:'newInputNmber'},{label:'老客',prop:'oldInputNmber'}]"/>
        </div>
        <div class="collapse_item">
          <div class="title">审核数</div>
          <Table :data="historyData"
                 :column="[{label:'总数',prop:'pass'},{label:'新客',prop:'newPass'},{label:'老客',prop:'oldPass'}]"/>
        </div>
        <div class="collapse_item">
          <div class="title">放款数</div>
          <Table :data="historyData"
                 :column="[{label:'总数',prop:'pay'},{label:'新客',prop:'newPay'},{label:'老客',prop:'oldPay'}]"/>
        </div>
        <div class="collapse_item">
          <div class="title">放款本金</div>
          <Table :data="historyData"
                 :column="[{label:'总数',prop:'payPrincipal'},{label:'新客',prop:'newPayPrincipal'},{label:'老客',prop:'oldPayPrincipal'}]"/>
        </div>
        <div class="collapse_item">
          <div class="title">放款合同金额</div>
          <Table :data="historyData"
                 :column="[{label:'总数',prop:'payAmount'},{label:'新客',prop:'newPayAmount'},{label:'老客',prop:'oldPayAmount'}]"/>
        </div>
        <div class="collapse_item">
          <div class="title">展期数</div>
          <Table :data="historyData"
                 :column="[{label:'总数',prop:'defer'},{label:'新客',prop:'newDefer'},{label:'老客',prop:'oldDefer'}]"/>
        </div>
        <div class="collapse_item">
          <div class="title">待打款数</div>
          <Table :data="historyData"
                 :column="[{label:'总数',prop:'waitPay'},{label:'新客',prop:'newWaitPay'},{label:'老客',prop:'oldWaitPay'}]"/>
        </div>
        <div class="collapse_item">
          <div class="title">待打款本金</div>
          <Table :data="historyData"
                 :column="[{label:'总数',prop:'waitPayAmount'},{label:'新客',prop:'newWaitPayAmount'},{label:'老客',prop:'oldWaitPayAmount'}]"/>
        </div>
        <div class="collapse_item">
          <div class="title">今日到期</div>
          <Table :data="historyData"
                 :column="[{label:'到期',prop:'expireShould'},{label:'已还',prop:'expireRefund'},{label:'待还',prop:'expireWait'},{label:'逾期率',prop:'overdueRate'}]"/>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
import {
  fetchBusinessDataAudit,
  fetchBusinessDataDefer,
  fetchBusinessDataLoan,
  fetchBusinessDataRegister,
  fetchBusinessDataPay,
  fetchBusinessDataNotPay,
  fetchBusinessDataShould,
  fetchBusinessDataRemind
} from '@/api'
import {dateFormat, setLoading, clearToast} from '@/utils'
import Table from './table'
import InputDate from '@/components/InputDate'

export default {
  name: "index",
  components: {
    Table,
    InputDate
  },
  data() {
    return {
      businessData: {},
      activeName: ['1'],
      historyData: {},
      // timeValue: dateFormat(this.setDay(1)),
      historyTime: {
        startTime: dateFormat(this.setDate(7)),
        endTime: dateFormat(this.setDate(1))
      },
      remindCollection: [],
      remindColumns: [{label: '客群', prop: 'customerGroupName'}, {label: '阶段笔数', prop: 'settle'}, {
        label: '结清笔数',
        prop: 'total'
      }, {label: '催回率', prop: 'collectionRefundRate'}]
    }
  },
  computed: {
    username() {
      return sessionStorage.getItem('name') || ''
    },
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      await this.getBusinessToday()
      await this.getBusinessHistory()
    },
    async historyStartChange(value) {
      if (this.validateDate({startTime: value, endTime: this.historyTime.endTime})) {
        setLoading()
        this.historyTime.startTime = value
        await this.getBusinessHistory()
        clearToast()
      }
    },
    async historyEndChange(value) {
      if (this.validateDate({startTime: this.historyTime.startTime, endTime: value})) {
        setLoading()
        this.historyTime.endTime = value
        await this.getBusinessHistory()
        clearToast()
      }
    },
    // 校验时间区间
    validateDate({startTime, endTime}) {
      const startStamp = new Date(startTime).getTime()
      const endStamp = new Date(endTime).getTime()
      if (startStamp > endStamp) {
        this.$toast('开始时间不能大于结束时间')
        return false
      }
      return true
    },
    /**
     * 设置默认日期
     * @param num 多少天前
     * @returns {Date}
     */
    setDate(num) {
      const oldDate = new Date().getTime() - ((24 * 60 * 60 * 1000) * num)
      const date = new Date(oldDate)
      return date
    },

    async getBusinessToday() {
      const {countryId, adminUserId,} = this.$route.query
      const params = {
        countryId: parseInt(countryId),
        adminUserId: parseInt(adminUserId),
        datetimeStart: dateFormat(new Date()),
        datetimeEnd: dateFormat(new Date(new Date().getTime() + (24 * 60 * 60 * 1000)))
      }
      const setDataName = 'businessData'
      this.fetchBusinessDataAudit(params, setDataName)
      this.fetchBusinessDataDefer(params, setDataName)
      this.fetchBusinessDataLoan(params, setDataName)
      this.fetchBusinessDataRemind(params, setDataName)
      this.fetchBusinessDataRegister(params, setDataName)
      this.fetchBusinessDataPay(params, setDataName)
      this.fetchBusinessDataNotPay(params, setDataName)
      this.fetchBusinessDataShould(params, setDataName)
    },
    async getBusinessHistory() {
      const {startTime, endTime} = this.historyTime
      const {countryId, adminUserId,} = this.$route.query
      const params = {
        countryId: parseInt(countryId),
        adminUserId: parseInt(adminUserId),
        datetimeStart: startTime,
        datetimeEnd: dateFormat(new Date(new Date(endTime).getTime() + (24 * 60 * 60 * 1000)))
      }
      const setDataName = 'historyData'
      const p1 = this.fetchBusinessDataAudit(params, setDataName)
      const p2 = this.fetchBusinessDataDefer(params, setDataName)
      const p3 = this.fetchBusinessDataLoan(params, setDataName)
      const p4 = this.fetchBusinessDataRegister(params, setDataName)
      const p5 = this.fetchBusinessDataPay(params, setDataName)
      const p6 = this.fetchBusinessDataNotPay(params, setDataName)
      const p7 = this.fetchBusinessDataShould(params, setDataName)
      return Promise.all([p1, p2, p3, p4, p5, p6, p7])
    },
    // 获取业务数据统计---审核
    async fetchBusinessDataAudit(params, setDataName) {
      const res = await fetchBusinessDataAudit(params)
      if (res.code === 1) {
        const {newPass, oldPass, pass} = res.data
        this[setDataName] = {...this[setDataName], newPass, oldPass, pass}
      }
    },
    // 获取业务数据统计----展期
    async fetchBusinessDataDefer(params, setDataName) {
      const res = await fetchBusinessDataDefer(params)
      if (res.code === 1) {
        const {oldDefer, defer, newDefer} = res.data
        this[setDataName] = {
          ...this[setDataName],
          oldDefer, defer, newDefer
        }
      }
    },
    // 获取业务数据统计----进件
    async fetchBusinessDataLoan(params, setDataName) {
      const res = await fetchBusinessDataLoan(params)
      if (res.code === 1) {
        const {oldInputNmber, inputNmber, newInputNmber} = res.data
        this[setDataName] = {
          ...this[setDataName],
          oldInputNmber, inputNmber, newInputNmber
        }
      }
    },
    // 获取业务数据统计----注册
    async fetchBusinessDataRegister(params, setDataName) {
      const res = await fetchBusinessDataRegister(params)
      if (res.code === 1) {
        const {registrationNumber} = res.data
        this[setDataName] = {
          ...this[setDataName],
          registrationNumber
        }
      }
    },
    // 获取业务数据统计----放款
    async fetchBusinessDataPay(params, setDataName) {
      const res = await fetchBusinessDataPay(params)
      if (res.code === 1) {
        const {
          pay,
          oldPay,
          newPay,
          payAmount,
          oldPayAmount,
          newPayAmount,
          waitPayAmount,
          newWaitPayAmount,
          oldWaitPayAmount,
          newPayPrincipal,
          oldPayPrincipal,
          payPrincipal
        } = res.data
        this[setDataName] = {
          ...this[setDataName],
          pay,
          oldPay,
          newPay,
          payAmount,
          oldPayAmount,
          newPayAmount,
          waitPayAmount,
          newWaitPayAmount,
          oldWaitPayAmount,
          newPayPrincipal,
          oldPayPrincipal,
          payPrincipal
        }
      }
    },
    // 获取业务数据统计----待打款
    async fetchBusinessDataNotPay(params, setDataName) {
      const res = await fetchBusinessDataNotPay(params)
      if (res.code === 1) {
        const {newWaitPay, oldWaitPay, waitPay} = res.data
        this[setDataName] = {
          ...this[setDataName],
          newWaitPay, oldWaitPay, waitPay
        }
      }
    },
    // 获取业务数据统计----到期
    async fetchBusinessDataShould(params, setDataName) {
      const res = await fetchBusinessDataShould(params)
      if (res.code === 1) {
        const {expireShould, expireWait, expireRefund, overdueRate} = res.data
        this[setDataName] = {
          ...this[setDataName],
          expireShould, expireWait, expireRefund, overdueRate
        }
      }
    },
    // 获取业务数据统计----提醒催回率
    async fetchBusinessDataRemind(params) {
      const res = await fetchBusinessDataRemind(params)
      if (res.code === 1) {
        this.remindCollection = res.data
      }
    },

  }
}
</script>

<style lang="less" scoped>
.collapse_item {
  margin-bottom: 15px;

  .title {
    font-size: 16px;
    padding: 10px 0;
  }


}
</style>
